<template>
<!-- 工程结算台账-合同结算详细 -->
    <div>
    <Title/>
    <div class="base-page">
        <div v-if="isSwitch" class="openBox">
            <div class="openSwitchBox" @click="open"></div>
        </div>
        <div class="left" ref="leftBox">
            <div class="switchBox" @click="changeSwitch($event)"></div>
                <div ref="showBox">
                    <SelectMaterialClassContract
                    ref="materialClassRef"
                    @click="getTableData"
                    @getIdsClick='getIdsClick'
                />
                </div>
        </div>
        <!-- 列表 -->
        <div class="right">
               <ProjectCom :contractType='contractType'  v-if="contractType == 1"/>
               <OtherCom :contractType='contractType'   v-if="contractType == 2"/>
        </div>
    </div>
    </div>

</template>

<script>
import '@/utils/jquery.scrollTo.min'
import SelectMaterialClassContract from '../components/selectMaterialClassContract'
import ProjectCom from '../components/projectCom'
import OtherCom from '../components/otherCom'
import Title from '../components/title'
export default {
    components: {
        SelectMaterialClassContract,
        ProjectCom,
        OtherCom,
        Title
    },
    data () {
        return {
            contractType: 1,
            //开关状态
            isSwitch: false,
        }
    },
    created () {
        this.contractType = Number(this.$route.query.contractType) || 1
    },
    mounted () {
    },
    computed: {
        // 左侧树高度
        leftTreeHeight () {
            return (this.screenHeight - 21) + 'px'
        },
    },
    methods: {
        //左侧树点击事件
        getTableData (data) {
            const list = this.setTableItem(data)
            this.tableData = list
            this.total = list.length
        },
        //左侧树点击查看项目部或外包方
        getIdsClick (ids, type) {
            console.log(ids, 'ids')
            console.log(type, 'type')
        },
        //根据左侧树操作设置表格数据
        setTableItem (target) {
            console.log(target, 'target')
            const list = []
            const obj = {}
            //设置父级
            obj.orgName = target.orgName
            obj.orgId = target.orgId
            obj.contractAmount = this.getRandomData(1)
            obj.currentCompletedQuantity = this.getRandomData(2)
            obj.currentCompletedAmount = this.getRandomData(1)
            list.push(obj)
            //设置子级
            if(target.children && target.children.length > 0) {
                target.children.forEach(item=>{
                    const obj = {}
                    obj.orgName = item.orgName
                    obj.orgId = target.orgId
                    obj.contractAmount = this.getRandomData(1)
                    obj.currentCompletedQuantity = this.getRandomData(2)
                    obj.currentCompletedAmount = this.getRandomData(1)
                    list.push(obj)
                })
            }
            //设置合计
            let contractAmountTotal = 0
            let currentCompletedQuantityTotal = 0
            let currentCompletedAmountTotal = 0
            list.forEach(item=>{
                contractAmountTotal += item.contractAmount
                currentCompletedQuantityTotal += item.currentCompletedQuantity
                currentCompletedAmountTotal += item.currentCompletedAmount
            })
            const totalObj = {
                orgName: '合计',
                contractAmount: contractAmountTotal.toFixed(2) * 1,
                currentCompletedQuantity: currentCompletedQuantityTotal.toFixed(4) * 1,
                currentCompletedAmount: currentCompletedAmountTotal.toFixed(2) * 1,
            }
            list.push(totalObj)
            return list
        },
        //设置随机数 type 金额 1 数量 2
        getRandomData (type) {
            const index = type == 1 ? 2 : 4
            const target = Math.random() * 10000 + 1000
            return target.toFixed(index) * 1
        },
        //页面跳转
        examine (row) {
            console.log(row, 'rr')
        },
        //关闭抽屉事件
        changeSwitch (e) {
            const parentNode = e.target.parentNode
            parentNode.style.width = '0'
            this.$refs.showBox.style.display = 'none'
            setTimeout(() => {
                this.isSwitch = true
            }, 600)
        },
        //打开抽屉事件
        open () {
            this.$refs.leftBox.style.width = '30%'
            this.isSwitch = false
            setTimeout(() => {
                this.$refs.showBox.style.display = 'block'
            }, 600)
        }
    }
}
</script>

<style lang="scss" scoped>
    .base-page{
      display: flex;
      justify-content: space-between;
      align-items: self-start;
      .openBox {
        width: 5%;
        padding: 0;
        .openSwitchBox::before {
            font-family: element-icons !important;
            content: "\e6dc";
            width: 100%;
            font-size: 30px;
            color: #2e61d7;
            display: block;
            padding: 10px 5px;
            cursor: pointer;
            box-sizing: border-box;
        }
      }
      .left{
        width: 30%;
        padding: 0;
        transition: all 0.6s ease-in;
                .switchBox::before {
                    font-family: element-icons !important;
                    content: "\e6dd";
                    width: 100%;
                    font-size: 30px;
                    color: #2e61d7;
                    display: block;
                    padding: 10px 5px;
                    cursor: pointer;
                    box-sizing: border-box;
                    pointer-events: auto;
                    text-align: right;
                    background: #e4ecf0;
                }
      }
      .right{
          width: 70%;
              .top {
                display: flex;
                justify-content: space-around;
                padding-left: 20px;
                .butBox {
                    width: 18%;
                    display: flex;
                    justify-content: space-around;
                    .isButton {
                        background-color: rgb(46, 97, 215);
                        color: rgb(255, 255, 255);
                        font-size: 12px;
                        cursor: pointer;
                        font-weight: 500;
                        border: none;
                        height: 26px;
                        border-radius: 5px;
                    }
                }
                .radioBox {
                    width: 27%;
                }
                .selectBox {
                    width: 15%;
                }
                .searchBox {
                    width: 15%;
                }
        }
      }
    }
    ::v-deep .e-form .el-form-item .el-form-item__content{
        display: flex; align-items: center;
    }
    .leftSpacing {
        margin-left: 6px;
    }
    .echartsBox {
        width: 100%;
        height: 500px;
        padding-top: 20px;
        display: flex;
        background-color: #ffffff;
        .lineChartBox {
            flex: 1;
            height: 100%;
        }
        .pieChartBox {
            flex: 1;
            height: 100%;
        }
    }

</style>
